<%@ page import="entity.User" %>
<%@ page import="entity.Instructor" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员首页</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%; /* 确保有足够的高度 */
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            height: 100%; /* 使.wrapper填满整个视口高度 */
        }

        .header {
            background-image: linear-gradient(to right, rgb(196, 208, 255), rgb(196, 232, 255));
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin: 0;
        }

        .user-info {
            color: black;
            display: flex;
            align-items: center;
        }

        .user-info .username {
            margin-right: 10px;
        }

        .user-info a {
            color: black;
            text-decoration: none;
            margin-left: 10px;
        }

        .sidebar {
            width: 200px;
            height: calc(100vh - 60px); /* Adjust height to exclude header */
            background-image: linear-gradient(to right, rgb(196, 208, 255), rgb(196, 232, 255));
            color: white;
            padding: 20px;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar ul li a {
            color: black;
            text-decoration: none;
            display: block;
            padding: 10px;
            transition: background-color 0.3s;
        }

        .sidebar ul li a:hover, .sidebar ul li a.active {
            background-color: rgb(0, 216, 253);
        }

        .content {
            height: 82%;
            width: 82%;
            position: absolute; /* 绝对定位 */
            bottom: 20px; /* 距离底部20px */
            right: 20px; /* 距离右侧20px */
            background-color: #f9f9f9; /* 背景颜色 */
            border: 1px solid #ccc; /* 边框 */
            border-radius: 5px; /* 圆角边框 */
            flex-grow: 1; /* 使.content占据剩余空间 */
            /*padding: 10px 20px; !* 添加左右内边距 *!*/
            overflow: auto; /* 如果内容超出，显示滚动条 */
        }

        .content iframe {
            width: 100%; /* 设置iframe宽度为content的100% */
            height: 100%; /* 设置iframe高度为content的100% */
            border: none; /* 移除iframe边框 */
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>
</head>
<body>
<%--提示登录成功信息--%>
<%
    String successMessage = (String) request.getAttribute("successMessage");
    if (successMessage != null) {
%>
<script>
    // 这个函数会在页面加载完成后立即执行
    window.onload = function () {
        // 显示一个alert对话框
        alert('<%= successMessage %>');
    };
</script>
<%
        request.removeAttribute("successMessage");
    }
%>
<div class="wrapper">
    <!-- 头部区域 -->
    <header class="header">
        <h1 style="color: black">网上请假系统</h1>
        <div class="user-info">
            <%
                Instructor instructor = (Instructor) session.getAttribute("instructor");
                if (instructor != null) {
            %>
            欢迎，<span class="username"><%= instructor.getInstName() %></span>|
            <%
                }
            %>
            <a href="/logout" class="btn btn-danger">退出</a>
        </div>
    </header>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
        <ul>
            <li><a href="hello.jsp" target="right">首页</a></li>
            <li><a href="/classes" target="right">班级信息管理</a></li>
            <li><a href="/course" target="right">班级课程信息管理</a></li>
            <li><a href="/student" target="right">学生信息管理</a></li>
            <li><a href="/leave?action=viewLeavelist" target="right">审核请假单</a></li>
            <li><a href="/leave?action=viewExport" target="right">导出请假单</a></li>
        </ul>
    </nav>
    <div class="content">
        <iframe name="right" width="100%" height="100%"></iframe>
    </div>
</div>
</body>
</html>
<script>
    // 这里可以添加一些JavaScript代码来处理导航栏的交互，例如切换活动状态等
    document.querySelectorAll('.sidebar ul li a').forEach(link => {
        link.addEventListener('click', function (e) {
            // 移除所有活动的类
            document.querySelectorAll('.sidebar ul li a').forEach(link => {
                link.classList.remove('active');
            });

            // 添加活动类到当前点击的链接
            e.target.classList.add('active');
        });
    });
</script>